/*
 * @作者: kerwin
 * @公众号: 大前端私房菜
 */
import React, { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import store from '../redux/store'
import getCinemaListAction from '../actionCreator/getCinemaListAction'
import {connect} from 'react-redux'
 function Cinemas(props) {
    const [cityName] = useState(props.cityName)
    let navigator = useNavigate()
    let {list,getCinemaListAction}= props


    useEffect(() => {
        if (list.length === 0) {

            // 去后台区数据
            getCinemaListAction()
            // store.dispatch(getCinemaListAction())
        }
        else {
            console.log("store 缓存");
        }
        // var unsubscribe=store.subscribe(() => {
        //     // 更新传入数据
        //     setList(store.getState().CinemaListReducer.list)
        // })
        // return ()=>{
            // 销毁
            // unsubscribe()
        // }
    }, [list,getCinemaListAction])
    return (
        <div>
            <div >
                <div style={{ overflow:'hidden' }}>
                    <span style={{ float: "left" }} onClick={() => { navigator(`/city`) }
            }>{props.cityName}</span>
                    <span style={{ float: "right" }} onClick={()=>navigator(`/films/search`)}>搜索</span>
                </div>
                <ul>
                    {
                        list.map(item =>
                            <dl key={item.cinemaId} >
                                <dt style={{fontSize:"16px"}}>{item.name}</dt>
                                <dd style={{color:"grey",fontSize:"12px"}}>{item.address}</dd>
                            </dl>
                        )
                    }
                </ul>
            </div>
        </div>
    )
}
// 允许子组件定制化传数据和回调函数
const mapStateToProps=(state)=>{
    return{
        list:state.CinemaListReducer.list,
        cityName:state.CityReducer.cityName
    }
}
const mapDispatchToProps={
    getCinemaListAction
}
export default connect(mapStateToProps,mapDispatchToProps)(Cinemas)